<template>
	<view style="padding-bottom:50rpx;">
		<page-head :title="'教练直约'" :headtype="2"></page-head>
		<view class="searchtop flex">
			 <!-- @click="selesite" -->
			<view class="searchtopl flex" @click="districtfun">
				<uv-icon name="map" size="18" color="#040000"></uv-icon>
				<view class="ellipsis01" style="max-width:100rpx;font-size:24rpx;margin: 0 10rpx;text-align:center;">{{ opensiteac.city_name }}</view>
				<!-- <view class="ellipsis01" style="max-width:100rpx;font-size:24rpx;margin: 0 10rpx;text-align:center;">{{ sitemsg.city }}</view> -->
				<uv-icon name="arrow-down-fill" size="14" color="#040000"></uv-icon>
			</view>
			<view class="searchtopr flex">
				<view class="searchtopricon flex" @click.stop="searchenter">
					<uv-icon class="marginAuto" name="search" size="28" color="#DADAE5"></uv-icon>
				</view>
				<view class="searchtoprinput">
					<input type="text" v-model="searcar" @confirm="searchenter" placeholder="品牌/教练名字/区域/动力类型" />
				</view>
				<!-- <view class="searchtoprbtn mainBg baiColor" @click="searchenter()">搜索</view> -->
			</view>
		</view>
		<view class="jllist">
			<view class="jlitem marginAuto flex" v-for="(item,index) in datas" :key="index">
				<view class="jlitembtn mainBg baiColor" @click="apifun.navigate('/pages/my/mydriverzyxq','jlid='+ item.id +'&mealid='+mealid)">预约</view>
				<view class="jlitemimg">
					<image v-if="item.avatar" :src="apifun.URLimg+item.avatar" mode="aspectFill"></image>
					<image v-if="!item.avatar" src="@/static/logo.png" mode=""></image>
				</view>
				<view class="jlitemmsg">
					<view class="jlitemm-name flex">
						<view class="jlitemm-namem">{{ item.username }}</view>
						<view class="jlq">{{ item.age }}岁</view>
					</view>
					<view class="jlitemmb">
						<view class="jlq">服务次数：{{ item.service_num }}</view>
						<view class="jlq">{{ item.drive_age }}年驾龄</view>
					</view>
					<view class="jlitemmdoc">接单区域：{{ item.areas }}</view>
					<view class="jlitemmdoc">{{ item.brand }} / {{ item.type }} / {{ item.shape }}</view>
				</view>
			</view>
		</view>
		<uv-picker ref="siteref" :columns="opensitedata" keyName="city_name" @confirm="entersite"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				page:1,
				mealid:'',  // 套餐id
				// lng: this.apifun.lng,
				// lat: this.apifun.lat,
				lng:uni.getStorageSync('lng'),
				lat:uni.getStorageSync('lat'),
				sitemsg:{},
				searcar:'',
				datas:[],
				opensitedata:[[]],
				opensiteac:{},
			};
		},
		onLoad(option) {
			this.mealid = option.mealid || '';
			this.sitemsg = uni.getStorageSync('sitemsg');
			this.opensiteac = uni.getStorageSync('servesitemsg');
			this.initData();
			// this.getpositionfun();    // 废弃-位置用选择的位置
			// this.getLocationInfofun();  // 开发环境
		},
		onShow() {
			this.getopensitefun();
		},
		methods: {
			initData(){
				let sendData = {
					search:this.searcar,
					// city_id:this.sitemsg.adcode,   //废弃- 根据经纬度获取的adcode
					city_id:this.opensiteac.city_id,
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/api/partnerDrive/getPartnerList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--
							return false
						}
						this.datas = [...this.datas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			searchenter(){
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			districtfun(){ // 地区
				this.$refs.siteref.open();
				this.getopensitefun()
			},
			entersite(e){
				this.opensiteac = e.value[0];
				uni.setStorageSync('servesitemsg',this.opensiteac);
				this.page = 1;
				this.datas = [];
				this.initData()
			},
			getopensitefun(){  // 获取地址
				// study/getOpenCityList
				this.apifun.unirequest('/api/partnerDrive/getOpenCityArr','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						// datas.unshift({
						// 	name:'地区',
						// 	pid:'',
						// 	id:'',
						// 	code:''
						// })
						if(datas.length > 0){
							let sitemsg_city = uni.getStorageSync('servesitemsg').city_name;
							datas.forEach((item,index)=>{
								if(item.city_name == sitemsg_city){
									this.opensiteac = item;
									uni.setStorageSync('servesitemsg',item);
								}
							})
							this.opensitedata[0] = datas;
						}
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success: (res) => {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						this.getLocationInfofun();
					}
				});
			},
			getLocationInfofun(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
				};
				this.apifun.unirequest('/api/index/getLocationInfo','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.sitemsg = datas.ad_info;
						this.page = 1;
						this.datas = [];
						this.initData();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			selesite(){
				uni.chooseLocation({
					success: (res) => {
						this.city = res.name;
						this.address = res.address;
						this.lng = res.longitude;
						this.lat = res.latitude;
					}
				});
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	.searchtop{
		width: 94%;
		padding:20rpx 3%;
		position: sticky;
		background: #fff;
		justify-content: space-between;
		.searchtopl{
			line-height:70rpx;
			color: #222222;
		}
		.searchtopr{
			width: 70%;
			height: 68rpx;
			border-radius: 100rpx;
			margin-left:10rpx;
			border: 1px solid #F1F1F1;
			justify-content: space-between;
			.searchtopricon{
				width: 80rpx;
				height: 45rpx;
				margin: 10rpx 0;
				border-right: 1px solid #DADAE5;
			}
			.searchtoprinput{
				flex: 1;
				height: 70rpx;
				input{
					flex: 1;
					height: 70rpx;
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}
			}
			.searchtoprbtn{
				width: 120rpx;
				height: 60rpx;
				line-height:60rpx;
				text-align: center;
				border-radius: 100rpx;
				font-size:30rpx;
				margin-top:5rpx;
			}
		}
	}
	.jlitem{
		position: relative;
		margin-top: 20rpx;
		width:690rpx;
		padding:10rpx 0;
		background: #fff;
		border-radius: 10rpx;
		.jlitembtn{
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			width: 130rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 100rpx;
			font-size:30rpx;
			text-align: center;
		}
		.jlitemimg{
			width: 180rpx;
			height: 200rpx;
			image{
				width: 180rpx;
				height: 200rpx;
				border-radius: 6rpx;
			}
		}
		.jlitemmsg{
			margin-left:20rpx;
			width: 80%;
			.jlitemm-name{
				margin: 30rpx 0 20rpx;
				.jlitemm-namem{
					color: #222222;
					font-size: 30rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#EAF1FF;
					color:#1686F8;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmb{
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#FFEFE4;
					color:#FF720C;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmdoc{
				color:#666666;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>